<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点聚合</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=e7edfb1075962c5c85af609e9b01a796&plugin=AMap.CitySearch"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .info {
            border: solid 1px silver;
        }
        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div id="tip"></div>
<div class="button-group">
    <input type="button" class="button" value="自定义样式点聚合" id="add1"/>
    <input type="button" class="button" value="默认样式点聚合" id="add0"/>
	<input type="button" class="button" value="显示当前城市" onClick="javascript:showCityInfo()"/>
	
</div>
<script>
    var cluster, markers = [];
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom:5
    });
  
    //获取用户所在城市信息
    function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function(status, result) {
	
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    var cityinfo = result.city;
                    var citybounds = result.bounds;
                    document.getElementById('tip').innerHTML = '您当前所在城市：'+cityinfo;
                    //地图显示当前城市
                    map.setBounds(citybounds);
                }
            } else {
                document.getElementById('tip').innerHTML = result.info;
            }
        });
    }

    map.on('mousewheel',function(e){
        console.log(map.getZoom());
        currentzoom=map.getZoom();
           if(currentzoom==6){  
            // 请求数据
        	$.ajax({
        		url:"{{route('map')}}",
        		type:'post',
        		dataType:'json',
        		data:{},
        		success:function(data){
        			
        		 for (var i = 0; i < data.length; i++) {
        				var str=data[i].position.position;
        				var markerPosition = str.split(",");
        			    var circle = new AMap.Circle({
        			        map: map,
        			        center: markerPosition,          //设置线覆盖物路径
        					radius: 15000,
        			        strokeColor: "#3366FF", //边框线颜色
        			        strokeOpacity: 0.3,       //边框线透明度
        			        strokeWeight: 3,        //边框线宽
        			        fillColor: "#FFA500", //填充色
        			        fillOpacity: 0.35,//填充透明度
        			        content:"<h5>"+data[i].shortform+"</h5>"
        			    });
//         				addCustomMarker(markerPosition);
//                 AMap.event.addListener(circle,'click',function(e){
//                      console.log(circle.getCenter());   });
        			}
        		},
        		Error:function(){
        			
        		}
        	});
       }
 });

    function addCustomMarker(marker){  
        //自定义覆盖物dom 元素  
        var m = document.createElement("div");  
        m.className = "marker";  
        var n = document.createElement("span");  
        n.innerHTML = "Amap";  
        m.appendChild(n);  
          
        var marker1 = new AMap.Marker({  
            map:map,  
            position:marker, //基点位置  
            offset:new AMap.Pixel(0,-40), //相对于基点的偏移位置  
            //draggable:true,  //是否可拖动  
            content:m   //自定义覆盖物内容  
        });  
          
          
        //mouseover,换个皮肤  
        AMap.event.addListener(marker1,'mouseover',function(){  
            n.innerHTML = "高德地图"; //修改内容  
            m.className = "marker change";//增加样式  
        });  
          
          
        //mouseout,换回皮肤  
        AMap.event.addListener(marker1,'mouseout',function(){  
            n.innerHTML = "Amap"; //修改内容  
            m.className = "marker";  
        });  
          
    }  



    
	var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();

    AMap.event.addDomListener(document.getElementById('add0'), 'click', function() {
        addCluster(0);
    });
    AMap.event.addDomListener(document.getElementById('add1'), 'click', function() {
        addCluster(1);
    });
    
    
    // 添加点聚合
    function addCluster(tag) {
        if (cluster) {
            cluster.setMap(null);
        }

        if (tag == 1) {
            var sts = [{
                url: "http://a.amap.com/lbs/static/img/1102-1.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -30)
            }, {
                url: "http://a.amap.com/lbs/static/img/2.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -30),
                content:'梵蒂冈梵蒂冈'
            }, {
                url: "http://lbs.amap.com/wp-content/uploads/2014/06/3.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -45),
                textColor: '#CC0066'
            }];
            map.plugin(["AMap.MarkerClusterer"], function() {
                cluster = new AMap.MarkerClusterer(map, markers, {
                    styles: sts
                });
            });
        } else {
            map.plugin(["AMap.MarkerClusterer"], function() {
                cluster = new AMap.MarkerClusterer(map, markers);
            });
            
            AMap.event.addListener(cluster, "click", function(e){
                var cr=e.target; 
          
//                 console.log(e);
//                 console.log(cr.getClustersCount());
//                 console.log(cr.getStyles());
                var mp=cr.getMap(); 
                var mpZoom=mp.getZoom();
                console.log(mpZoom) 
                var clustermarks=e.markers; 
                if(mpZoom>=18){
                    
                    
                    } 
                
             });
            
        }
    }
</script>
</body>
</html>